import React from 'react';
import { Provider } from 'react-redux';
import { hot } from 'react-hot-loader';
import { createBrowserHistory } from 'history';
import Loading from 'components/Loading';
import AppRouter from './router';
import initState from './state';
import configureStore from './store';
import './style.scss';

class App extends React.PureComponent {
  state = {
    initialState: null,
    history: null,
    store: null,
  };

  async componentDidMount() {
    const initialState = await initState();
    const history = createBrowserHistory();
    const store = configureStore(initialState, history);

    this.setState({ initialState, history, store });
  }

  render() {
    const { initialState, history, store } = this.state;

    if (!initialState || !store) {
      return <Loading />;
    }

    return (
      <div className="app-container">
        <Provider store={store}>
          <AppRouter history={history} />
        </Provider>
      </div>
    );
  }
}

export default hot(module)(App);
